<template>
    <div class="register">

        <div class="loginBox">
		<h2>注册</h2>
		
			<div class="item">
				<input type="text" name="username" required="" v-model="user" @input="isuser()">
				<label for="">用户名</label>
			</div>
			
			<div class="item">
				<input type="E-Mail" name="email" required="" v-model="email" @input="isemail()">
				<label for="">邮箱</label>
				
			</div>
			<div class="item">
				<input :type="type" name="password" required="" v-model="password" @input="ispassword()">
				<label for="">密码</label>
				<a href="###" class="iconfont" style="color:#fff;position:absolute;left:90%;top:1rem;" v-show="!islook" @click="look()">&#xe6e0;</a>
				<a href="###" class="iconfont" style="color:#fff;position:absolute;left:90%;top:1rem;" v-show="islook" @click="look()">&#xe6e1;</a>
			</div>
			<div class="item" style="width: 50%">
				<input type="text" name="verifyCode" required="" v-model="code" @input="iscode()">
				<label for="">验证码</label>
				<span class="code" @click="get()"  ref="code">
					<a href="###" id="getcode" ref="eleCode" @click="codeTimer()">获取验证码</a>
					<span class="first"></span>
					<span class="second"></span>
					<span class="third"></span>
					<span class="fourth"></span>
				</span>
			</div>

			<button class="btn" @click="register()">注册
			<span class="first"></span>
			<span class="second"></span>
			<span class="third"></span>
			<span class="fourth"></span>
			</button>

			<button class="btn" @click="login()">登录
			<span class="first"></span>
			<span class="second"></span>
			<span class="third"></span>
			<span class="fourth"></span>
			</button>
			
	</div>

	<div class="warn" v-show="show">
		{{this.warn}}
	</div>
    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
export default {
	name: 'register',
	data () {
		return {
			type: 'password',
			islook: false,
			user: '',
			password: '',
			email: '',
			code: '',
			show: true,
			warn: '',
			// settime: false,
			timer: '60',
		}
	},

	methods: {
		look () {
			if (this.islook) {
				this.type = "password"
				this.islook = !this.islook
				
			}
			else {
				this.type = "text"
				this.islook = !this.islook
				
			}
		},

		get () {
			let postData = qs.stringify({
				email: this.email,
			})

			axios.post(`/api/mail/sendEmail`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

				if (response.status === 200) {
					if (this.email) {
						if (response.data === true) {
							this.warn = "验证码已发送"
							// this.settime = true
							// alert("验证码已发送,请注意查收！")
							this.$message({
								type: 'success',
								message: "验证码已发送,请注意查收！"
							})

						} else {
							this.warn = "邮箱格式错误"
						}
						
					} else {
						this.warn = "请先填写邮箱"
					}
					
					this.show = true
					// console.log(response.data)
				} 

			})
		},

		codeTimer() {
			// if (this.settime) {
				// this.timer = 60;
				// this.codeText = "获取验证码";
				let _this = this;//setTimeout里面的this不一样,所以在这里先保存好
				if (this.timer >= 1) {
				//this.$refs.eleCode是vue获取dom元素的一种方法
				this.$refs.eleCode.setAttribute("disabled", "true");//验证码倒计时开始后，不可再点击
				// this.$refs.eleCode.setAttribute("value", this.timer + "s 后获取");//点击后的文本
				this.$refs.eleCode.innerHTML = this.timer + "s 后获取"
				// this.$refs.eleCode.style.backgroundColor = "#fce0d2";//点击后颜色变淡
				this.timer--;
				// console.log(this.timer)
				setTimeout(function () {
					_this.codeTimer();
				}, 1000);
				} else {
				this.$refs.eleCode.innerHTML = "获取验证码"
				this.$refs.eleCode.removeAttribute("disabled");
				this.timer = 60;
				}
			// }
		},


		register () {
			let postData = qs.stringify({
				username: this.user,
				password: this.password,
				email: this.email,
				code: this.code,
			})

			axios.post(`/api/user/register`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

				if (response.status === 200) {

					this.show = true
					this.warn = response.data
					if (response.data === "注册成功") {
						// alert("注册成功!")
						this.$message({
							type: 'success',
							message: "注册成功!"
						})
						// this.$router.push({name:'login'})
						this.$router.replace("/login")
					} 
				} 

			})
		},

		login () {
			this.$router.push("/login")
		},

		isuser () {
			this.show = false
		},

		ispassword () {
			if (this.password.length < 6 || this.password.length > 8) {
				this.show = true
				this.warn = "密码格式错误，六位至八位"
			} else {
				this.show = false
			}
		},

		isemail () {
			this.show = false
		},

		iscode () {
			this.show = false
		},
		
	},
	
}
</script>

<style lang="stylus" scoped>
.warn {
	position:absolute;
	top: 8rem;
}
input,
button {
	background: transparent;
}
.register {
	height: auto;
	font-size: .9rem;
	background: linear-gradient(#141e30,#243b55);
	display: flex; 
	justify-content: center;
	align-items: center;
	color: #03e9f4;
}
.loginBox {
	width: 30%;
	height: auto;
    margin-top: 5rem;
	background: rgba(0,0,0,.6);
	padding: 2rem;
	box-sizing: border-box;
	box-shadow: 2px 2px 2px rgba(0,0,0,.6);
	border-radius: 10px;
	margin-top: 10rem;
	margin-bottom: 4rem; 
}
.loginBox h2 {
	text-align: center;
	color: #03e9f4;
	font-size: 1.3rem;
	margin-bottom: 2rem;
}
.item {
	height: 45px;
	border-bottom: 1px solid #fff;
	margin-bottom: 40px;
	position: relative;
}
.item input {
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 1rem;
	padding-top: 20px;
	box-sizing: border-box;

}
.item label {
	position: absolute;
	top: .75rem;
	left: 0rem;
	transition: all 0.4s linear;
}

// 实现点击input框，提示字体向上移动变小
.item input:focus+label,
.item input:valid+label {
	top: 0;
	font-size: .75rem;
	color: skyblue;
}

.btn {
	padding: .5rem 1rem;
	margin-top: 0rem;
	margin-left: 20%;
	font-size: .9rem;
	color: #03e9f4;
	position: relative;
	overflow: hidden;
	cursor:pointer;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.btn:hover {
	background: #03e9f4;
	border-radius: 5px;
	color: #fff;
	box-shadow: 0 0 5px 0 #03e9f4,
				0 0 25px 0 #03e9f4,
				0 0 50px 0 #03e9f4,
				0 0 100px 0 #03e9f4;
}

.btn span {
	position: absolute;
}
.btn .first {
	width: 100%;
	height: .1rem;
	background: -webkit-linear-gradient(left,transparent,#03e9f4);
	left: -100%;
	top: 0px;
	animation: line1 1s linear infinite;
}
@keyframes line1{
	50%,100% {
		left: 100%;
	}
}
.btn .second {
	width: 2px;
	height: 100%;
	background: -webkit-linear-gradient(top,transparent,#03e9f4);
	right: 0%;
	top: -100%;
	animation: line2 1s 0.25s linear infinite;
}
@keyframes line2{
	50%,100% {
		top: 100%;
	}
}
.btn .third {
	width: 100%;
	height: 2px;
	background: -webkit-linear-gradient(left,#03e9f4,transparent);
	left: 100%;
	bottom: 0;
	animation: line3 1s 0.5s linear infinite;
}
@keyframes line3{
	50%,100% {
		left: -100%;
	}
}
.btn .fourth {
	width: 2px;
	height: 100%;
	background: -webkit-linear-gradient(top,#03e9f4,transparent);
	left: 0px;
	top: 100%;
	animation: line4 1s 0.75s linear infinite;
}
@keyframes line4{
	50%,100% {
		top: -100%;
	}
}
.code {
			width: auto;
			height: auto;
			position: absolute;
			overflow: hidden;
			right: -9rem;
			bottom: 0;
		}
		.code a {
			line-height: 35px;
			color: #03e9f4;
		}
		.code a:hover {
			color: #fff;
		}
		.code span {
			position: absolute;
		}
		.code .first {
			width: 100%;
			height: 2px;
			background: -webkit-linear-gradient(left,transparent,#03e9f4);
			left: -100%;
			top: 0px;
			animation: line1 1s linear infinite;
		}
		@keyframes line1{
			50%,100% {
				left: 100%;
			}
		}
		.code .second {
			width: 2px;
			height: 100%;
			background: -webkit-linear-gradient(top,transparent,#03e9f4);
			right: 0%;
			top: -100%;
			animation: line2 1s 0.25s linear infinite;
		}
		@keyframes line2{
			50%,100% {
				top: 100%;
			}
		}
		.code .third {
			width: 100%;
			height: 2px;
			background: -webkit-linear-gradient(left,#03e9f4,transparent);
			left: 100%;
			bottom: 0;
			animation: line3 1s 0.5s linear infinite;
		}
		@keyframes line3{
			50%,100% {
				left: -100%;
			}
		}
		.code .fourth {
			width: 2px;
			height: 100%;
			background: -webkit-linear-gradient(top,#03e9f4,transparent);
			left: 0px;
			top: 100%;
			animation: line4 1s 0.75s linear infinite;
		}
		@keyframes line4{
			50%,100% {
				top: -100%;
			}
		}
</style>